<template>
	<view class="fixtipo">
		<view :style="{height:getstateheight()+'px'}"> </view>
		<view class="tittop" :style="{height:gettitileheight()+'px'}">
			<view style="width:50rpx;" class="iconfont icon-fanhui" @click="back"></view>
			<view class="">设置</view>
			<view style="width:50rpx;" class=""></view>
		</view>
	</view>
	<view class="con">
		<view class="top">
			<view class="bor" @click="gislef">
				<view>个人资料</view>
				<view class="iconfont icon-fanhui role"></view>
			</view>
			<view class="" @click="gozhao">
				<view>账号与安全</view>
				<view class="iconfont icon-fanhui role"></view>
			</view>
		</view>
		<view class="last" @click="aboutme">
			<view>关于我们</view>
			<view class="iconfont icon-fanhui role"></view>
		</view>
		<view class="tui" @click="tui">退出登录 </view>
	</view>
</template>

<script setup>
	import {
		getstateheight,
		gettitileheight
	} from '@/utils/getinfo.js'
	const heightbox = getstateheight() + gettitileheight() + 'px'
	import userstore from '@/store/userlogin.js'
	const useuserstore = userstore()
	const back = () => {
		uni.navigateBack()
	}
	const aboutme=()=>{
		uni.navigateTo({
			url:"/pages/aboutme/aboutme"
		})
	}
	const gislef = () => {
		uni.navigateTo({
			url: "/pages/slef/slef"
		})
	}
	const gozhao=()=>{
		uni.navigateTo({
			url:"/pages/safe/safe"
		})
	}
	const tui = () => {
		uni.showModal({
			title: "提示！",
			content: "确定退出登录？",
			success(e) {
				if (e.confirm) {
					useuserstore.userlogin = ""
					useuserstore.token = ""
					useuserstore.userlove = []
					uni.reLaunch({
						url: "/pages/login/login"
					})
				}
			}
		})

	}
</script>

<style lang="scss" scoped>
	.role {
		transform: rotate(180deg) !important;
		font-size: 25rpx !important;
	}

	.fixtipo {
		background-color: #f7f7f7;
	}

	.tittop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 25rpx;
		font-size: 25rpx;

		.iconfont {
			font-size: 25rpx;
		}
	}

	.con {
		background-color: #f7f7f7;
		width: 100%;
		height: calc(100vh - v-bind(heightbox));
		padding: 25rpx;

		>view {
			background-color: #fff;
			font-size: 25rpx;
		}

		.top {
			border-radius: 20rpx;
			padding: 0 20rpx;

			.bor {
				border-bottom: 1rpx solid #eee;
			}

			>view {
				height: 85rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.last {
			margin: 20rpx 0;
			height: 85rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
		}

		.tui {
			height: 85rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;
			color: red;
			font-weight: 700;
		}
	}
</style>